<template>
  <div :class="className" class="com-flex border">
    <div class="com-title">{{ title }}{{ titleNumber }}</div>
    <div class="com-chart">
      <slot />
    </div>
    <span class="line1"></span>
    <span class="line2"></span>
    <span class="line3"></span>
    <span class="line4"></span>
  </div>
</template>

<script setup>
const props = defineProps({
  className: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "com-flex",
  },
  titleNumber: {
    type: [String, Number],
    default: "com-flex",
  },
});
</script>

<style lang="scss" scoped>
.com-flex {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid #66b6fe;
}
.com-chart {
  flex-grow: 1;
}
.com-title {
  width: 100%;
  height: 34px;
  font-size: 16px;
  line-height: 34px;
  text-align: center;
  color: "#313131";
  font-weight: 600;
  background-color: #4e99e0;
  text-align: center;
}
.line1 {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 0px;
  height: 0px;
  border-left: 0px solid #66b6fe;
  border-top: 0px solid #66b6fe;
  transition: all 0.8s;
}
.line2 {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0px;
  height: 0px;
  border-right: 0px solid #66b6fe;
  border-top: 0px solid #66b6fe;
  transition: all 0.8s;
}
.line3 {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 33px;
  height: 33px;
  border-left: 4px solid #66b6fe;
  border-bottom: 4px solid #66b6fe;
  transition: all 0.8s;
}
.line4 {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 33px;
  height: 33px;
  border-right: 4px solid #66b6fe;
  border-bottom: 4px solid #66b6fe;
  transition: all 0.8s;
}
.com-flex:hover .line1 {
  border-left: 4px solid #66b6fe;
  border-top: 4px solid #66b6fe;
  width: calc(100% + 2px);
  height: 0;
}
.com-flex:hover .line2 {
  border-right: 4px solid #66b6fe;
  border-top: 4px solid #66b6fe;
  width: 0;
  height: calc(100% + 2px);
}
.com-flex:hover .line3 {
  width: 0;
  height: calc(100% + 2px);;
}
.com-flex:hover .line4 {
  width: calc(100% + 2px);
  height: 0;
}
.com-flex:hover {
  background-color: rgba($color: #000000, $alpha: 0.2);
}
.com-flex:hover .com-title {
  background-color: lighten($color: #4e99e0, $amount: 20%);
}
</style>
